<template>
       <div class="header-box">
            <div class="header-logo">
                <a href="javascript:" title="长江师范学院"><img src="/img/logo.png"/></a>
            </div>
            <div class="header-title">
                <span>长江师范学院学科竞赛管理系统</span>
            </div>
            <div class="header-ul">
                <ul class="header-ul-nav layui-layout-right">
                    <li class="header-ul-nav-item layui-this">
                        <a @click="dialogVisible = true"  class="layer" data-method="about">系统公告</a>
                    </li>
                    <li class="header-ul-nav-item">
                        <a @click="dialogVisible1 = true"  class="layer" data-method="link">联系我们</a>
                    </li>
                <span class="layui-nav-bar" style="left: 0px; top: 43px; width: 0px; opacity: 0;"></span></ul>
            </div>

        <!-- 系统公告 -->
        <el-dialog
            title="系统公告"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
            <p>1、为取得最佳浏览体验，请使用google chrome以及1080P显示器。</p>
            <p>1、为取得最佳浏览体验，请使用google chrome以及1080P显示器。</p>
            <p>1、为取得最佳浏览体验，请使用google chrome以及1080P显示器。</p>
            <p>1、为取得最佳浏览体验，请使用google chrome以及1080P显示器。</p>
            <p>1、为取得最佳浏览体验，请使用google chrome以及1080P显示器。</p>
            <p>1、为取得最佳浏览体验，请使用google chrome以及1080P显示器。</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 联系我们 -->
        <el-dialog
            title="联系我们"
            :visible.sync="dialogVisible1"
            width="50%"
            :before-close="handleClose">
            <p>负责人:计算机工程学院-刘剑银</p>
            <p>地址:崇仁楼103</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
            </span>
        </el-dialog>

       </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        dialogVisible1: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }
</script>

<style lang="stylus">
.header-box{
    position: absolute;
    width: 100%;
    height: 50px;
    top: 0px;
    left: 0px;
    border-bottom: 1px solid #ff934d
}
.header-logo{
    float: left;
}
.header-title{
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
    display: inline-block;
}
.header-ul{
    float: right;
}
.header-ul-nav{
    float: left;
 
    height: 50px;
}
.header-ul-nav-item{
    display:block;
    width: 100px;
    line-height: 50px;
    float: left;
    a{
        font-size 13px
        display:block;
        height 50px
        width: 100px;
        text-align center
       
    }
    a:hover{
        background-color #f4f4f4
        color #e95b3a
        cursor:pointer
    }
}
</style>